<!-- 20210301 -->
<template>
	<view class="register_third_auth_cn">
		<view class="flex align-center justify-center">
			<view class="border"></view>
			<view class="text-24 text-b3 margin-lr-20">第三方登录方式</view>
			<view class="border"></view>
		</view>

		<view class="margin-top-35 flex align-center justify-center">
			<view class="third_item space flex align-center justify-center" style="background:#E2FFEE;"
				@click="login('weixin')" v-if="auth.includes('weixin')">
				<text class="tyIcon-weixin-line" style="font-size: 55rpx;color: #59CE57;"></text>
			</view>
			<view class="third_item space flex align-center justify-center" style="background:#E1F9FF;"
				@click="login('qq')" v-if="auth.includes('qq')">
				<text class="tyIcon-qq" style="font-size: 40rpx;color: #36CEFA;"></text>
			</view>
			<view class="third_item space flex align-center justify-center" style="background:#FFF2F2;"
				@click="login('sinaweibo')" v-if="auth.includes('sinaweibo')">
				<text class="tyIcon-sinaweibo" style="font-size: 48rpx;color: #D72323;"></text>
			</view>
			<view class="third_apple space line-height-80 border-ed radius-40 flex justify-center align-center"
				@click="login('apple')" v-if="auth.includes('apple') && platform == 'ios'">
				<text class="tyIcon-apple text-1a" style="color: #131415;"></text>
				<text class="margin-left-10 text-20" style="color: #131415;">通过Apple登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import common from '@/components/hzjc/utils/common.js';
	import request from '@/components/hzjc/utils/request.js';
	export default {
		props: {
			agree: {
				type: Boolean,
				default: false
			},
			auth: {
				type: Array,
				default: () => ['weixin', 'apple']
			}
		},
		data() {
			return {
				platform: '', //平台
				canClick: true
			}
		},
		created() {
			this.platform = common.platform()
		},
		methods: {
			// 授权登录（微信/QQ/APPLE）
			login(type) {
				if (!this.agree) {
					common.toast('请勾选用户协议')
					return false
				}
				console.log(this.canClick)
				if (this.canClick) {
					// qq取消授权监听不到 后期可以改成延时可点击
					if(type != 'qq'){
						this.canClick = false
					}
					uni.login({
						provider: type,
						success: (loginRes) => {
							uni.getUserInfo({
								provider: type,
								lang: 'zh_CN',
								success: (res) => {
									// console.log(res)
									this.canClick = true
									let url, data
									if (type == 'weixin') {
										data = {
											type: type,
											openid: res.userInfo.openId,
											unionid: res.userInfo.unionId,
											nickname: res.userInfo.nickName,
											headimgurl: res.userInfo.avatarUrl,
											sex: res.userInfo.gender,
											province: res.userInfo.province,
											city: res.userInfo.city,
											country: res.userInfo.country,
											language: 'zh_CN'
										}
									} else if (type == 'qq') {
										data = {
											type: type,
											openid: res.userInfo.openId,
											nickname: res.userInfo.nickname,
											headimgurl: res.userInfo.headimgurl,
											gender: res.userInfo.gender,
											gender_type: res.userInfo.gender_type,
											year: res.userInfo.year,
											province: res.userInfo.province,
											city: res.userInfo.city,
											figureurl_type: res.userInfo.figureurl_type,
											figureurl: res.userInfo.figureurl,
											figureurl_qq: res.userInfo.figureurl_qq,
											is_lost: res.userInfo.is_lost,
											level: res.userInfo.level,
											is_yellow_vip: res.userInfo.is_yellow_vip,
											is_yellow_year_vip: res.userInfo
												.is_yellow_year_vip,
											yellow_vip_level: res.userInfo.yellow_vip_level,
											vip: res.userInfo.vip,
											constellation: res.userInfo.constellation
										}
									} else if (type == 'sinaweibo') {
										data = {
											type: type,
											openid: res.userInfo.id,
											nickname: res.userInfo.screen_name,
											name: res.userInfo.name,
											headimgurl: res.userInfo.profile_image_url,
											gender: res.userInfo.gender,
											province: res.userInfo.province,
											city: res.userInfo.city,
											location: res.userInfo.location,
											description: res.userInfo.description,
											url: res.userInfo.url,
											profile_url: res.userInfo.profile_url,
											domain: res.userInfo.domain,
											weihao: res.userInfo.weihao,
											followers_count: res.userInfo.followers_count,
											friends_count: res.userInfo.friends_count,
											statuses_count: res.userInfo.statuses_count,
											favourites_count: res.userInfo.favourites_count,
											created_at: res.userInfo.created_at,
											remark: res.userInfo.remark,
											language: res.userInfo.language
										}
									} else if (type == 'apple') {
										data = {
											type: type,
											openid: res.userInfo.openId,
											family_name: res.userInfo.fullName.familyName ?? '',
											give_name: res.userInfo.fullName.giveName ?? '',
											given_name: res.userInfo.fullName.givenName ?? '',
											email: res.userInfo.email ?? '',
											authorization_code: res.userInfo.authorizationCode,
											identity_token: res.userInfo.identityToken,
											real_user_status: res.userInfo.realUserStatus,
											scope: res.userInfo.scope,
										}
									}

									request.getData('base/app/api/ThirdAuth/updateThirdAuthInfo',
										data, {
											loading: true
										}).then(res => {
										uni.setStorageSync('third_type', type)
										uni.setStorageSync('third_type_id', res.data
											.third_platform_user.id)
										if (res.code === 0) {
											if (res.data.type == 1) { //授权注册
												this.$emit('register', {
													type: type,
													id: res.data
														.third_platform_user.id
												})
											} else if (res.data.type == 2) { //授权登录
												uni.setStorageSync('user_id', res.data
													.user_id)
												uni.setStorageSync('access_token', res.data
													.access_token)
												uni.setStorageSync(
													'access_token_expire_time',
													res.data.access_token_expire_time)
												this.$emit('login')
											} else if (res.data.type == 3) { //授权绑定

											}
										}
									})
								},
								fail: (result) => {
									this.canClick = true
									common.toast('获取信息失败')
								}
							})
						},
						fail: (err) => {
							console.log('loginFail', err)
							this.canClick = true
							common.toast('授权失败，请检查是否已安装对应三方应用')
						}
					})
				}
			},
		}
	}
</script>

<style scoped>
	.border {
		width: 95rpx;
		height: 1rpx;
		border-top: 1rpx solid #ededed;
	}

	.third_item {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.third_apple {
		width: 220rpx;
	}

	.space {
		margin-left: 20rpx;
	}

	.space:first-child {
		margin-left: 0;
	}
</style>
